<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!--
 * @Description: 分享弹窗
 * @Author: Kerwin
 * @Date: 2023-09-20 11:50:40
 * @LastEditTime: 2024-08-16 10:39:08
 * @LastEditors:  Please set LastEditors
-->
<template>
    <view>
        <hy-transition :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="show" @click="closePop" />
        <hy-transition :mode-class="['slide-bottom']" :styles="transClass" :duration="duration" :show="show"
            @click="closePop">
            <view class="uni-share">
                <view class="uni-share-content">
                    <view v-for="(item, index) in options" :key="index" class="uni-share-content-box"
                        @click="handleShare(index)">
                        <view class="uni-share-content-image">
                            <u-icon :name="item.icon" :custom-prefix="'custom-icon'" class="content-image" />
                            <!-- <svg class="hy-icon content-image" aria-hidden="true">
                                <use :xlink:href="item.icon"></use>
                            </svg> -->
                        </view>
                        <text class="uni-share-content-text">{{ item.text }}</text>
                    </view>
                </view>
                <view class="uni-share-close" @click="closePop">取消</view>
            </view>
        </hy-transition>
    </view>
</template>
  
<script setup lang="ts">
import share_link from '@/static/share_link.png'
import share_poster from '@/static/share_poster.png'
import { onMounted, ref, reactive, watch } from 'vue'
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import {  route } from '@/utils/common'
import { APP_WEBSITE } from '@/common/config'
import { webSharePathFormat } from '@/common/wechat-share'


const props = withDefaults(
    defineProps<{
        cardId: string
        userId: string
        shareData?: object
    }>(),
    {
        cardId: '',
        userId: '',
        shareData: () => {
            return {
                title: '',
                desc: '',
                link: '',
                imgUrl: ''
            }
        }
    }
)

const options = ref([
    {
        text: '海报',
        icon: share_poster,
        handler: toSharePoster
    },
    {
        text: '复制链接',
        icon: share_link,
        handler: copyLink
    }
])
const duration = ref(300)
const maskClass = reactive({
    position: 'fixed',
    bottom: 0,
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.4)',
    zIndex: 100
})
const transClass = reactive({
    position: 'fixed',
    left: 0,
    right: 0,
    zIndex: 101,
    bottom: 0
})
const show = ref(false)
const showPop = () => {
    show.value = true
}
const closePop = () => {
    show.value = false
}

function handleShare(i: number) {
    options.value[i].handler()
}
function toSharePoster() {
    route({
        url: '/packageA/pages/businessCard/share',
        params: {
            cardId: props.cardId,
            userId: props.userId
        }
    })
}
function copyLink() {
    uni.setClipboardData({
        data: webSharePathFormat({redirect_url:'/packageA/pages/businessCard/index' , cardId: props.cardId, userId: props.userId }),
        success() {
            uni.showToast({
                title: '复制成功',
                icon: 'none'
            })
        }
    })
}
defineExpose({
    showPop,
    closePop
})
</script>
  
<style lang="scss" scoped>
.uni-share {
    width: 100%;
    border-radius: 20rpx 20rpx 0 0;
    /* #ifndef APP-NVUE */
    display: flex;
    flex-direction: column;
    /* #endif */
    background-color: #fff;

    .uni-share-content {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        overflow-x: scroll;
        padding: 15px 50rpx;

        .uni-share-content-box {
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: column;
            align-items: center;
            // width: 25%;
            // justify-content: space-between;
            margin-right: 60rpx;

            &:nth-last-child(1) {
                margin-right: 0;
            }

            .uni-share-content-image {
                /* #ifndef APP-NVUE */
                display: flex;
                /* #endif */
                flex-direction: row;
                justify-content: center;
                align-items: center;
                width: 90rpx;
                height: 90rpx;
                overflow: hidden;
                border-radius: 10rpx;

                .content-image {
                    width: 80rpx;
                    height: 80rpx;
                }
            }

            // &:nth-last-child(1) {
            //   .uni-share-content-image .content-image {
            //     width: 50rpx !important;
            //     height: 50rpx !important;
            //   }
            // }

            .uni-share-content-text {
                font-size: 26rpx;
                color: #333;
                padding-top: 5px;
                padding-bottom: 10px;
            }
        }
    }

    .uni-share-close {
        border-top: 1rpx solid #eee;
        padding: 20rpx 0;
        text-align: center;
        color: #bbbbbb;
        font-size: 24rpx;
    }
}
</style>
  